<template>
  <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
    <div>
      <el-row>
        <el-col :span="24">
          <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="信息标题" align="center" prop="logdate" />
            <el-table-column label="接报日期" align="center" prop="content" />
            <el-table-column label="事件类型" align="center" prop="staff" />
            <el-table-column label="事件等级" align="center" prop="belong" />
            <el-table-column label="报送单位" align="center" prop="dept" />
            <el-table-column label="城市" align="center" prop="status" />
          </el-table>
          <el-row :style="{ textAlign: 'center', marginTop: '20px' }">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="">取消</el-button>
      <el-button type="primary" @click="onSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import defaultAvatar from "@/assets/images/default_avatar.jpeg";
import { listDept } from "@/api/system/dept";
export default {
  name: "EventPicker",
  data() {
    return {
      open: false,
      title: "选择事件",
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        aerodromeid: null,
        filename: null,
      },
      // 总条数
      total: 0,
      loading: false,
      tableData: [],
      inputNumber: "",
      currentPage4: 1,
    };
  },
  mounted() {},
  computed: {},
  methods: {
    show() {
      this.open = true;
    },
    handleChange() {},
    handleSizeChange() {},
    handleCurrentChange() {},
    onSubmit() {},
    getList() {},
    handleQuery() {},
    resetQuery() {},
    handleSelectionChange() {},
    handleUpdate() {},
    handleDelete() {},
    numberInput(item) {
      this.inputNumber += item.label;
    },
    clearInputNumber() {
      this.inputNumber = "";
    },
    handleChooseStaff() {},
  },
};
</script>
<style scoped>
.title {
  line-height: 30px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #409eff;
  margin: unset !important;
}

.name-card {
  display: flex;
  align-items: center;
}

.name-card:hover {
  cursor: pointer;
}

.el-card {
  flex: 1;
  margin-left: 15px;
}

.card-form {
  flex: 1;
  text-align: right;
  display: flex;
  align-items: center;
}

.el-card /deep/ .el-card__header > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-card /deep/ .el-card__header > div > span {
  flex: 1;
}

.card-form .el-radio:first-of-type {
  margin-left: 30px;
}

.address-card /deep/ .el-card__body {
  display: flex;
  flex-flow: row;
  padding: 10px;
}

.avatar {
  width: 40px;
  height: 40px;
}

.avatar img {
  width: inherit;
  height: inherit;
}

.info {
  flex: 1;
  display: flex;
  flex-flow: column;
  margin-left: 10px;
}

.name {
  flex: 1;
  font-size: 18px;
  border-bottom: 1px solid white;
  padding-bottom: 5px;
}

.name span {
  font-size: 13px;
  margin-left: 10px;
  color: grey;
}

.contact {
  height: 26px;
  line-height: 26px;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  color: white;
}
</style>
